import React, { Component } from 'react';
import { StyleSheet, View,Text } from 'react-native';

import {txt,view} from '../comm/Size';

import AppStyle from '../styles/index';

export default class TopBar extends Component {
    constructor(props) {
        super();
        this.state = {};
    }

    render() {
        return (
            <View style={styles.topbar}>
                <View style={styles.leftIcon}>
                    {this.props.leftIcon}
                </View>
                <View style={styles.titleWrap}>
                    <Text style={styles.title}>{this.props.title}</Text>
                </View>
                <View style={styles.rightIcon}>
                    {this.props.rightIcon}
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    topbar: {
        height: view(100),
        backgroundColor: AppStyle.mainColor,
        alignItems:"center",
        paddingLeft: 10,
        paddingRight: 10,
        flexDirection: "row"
    },
    leftIcon: {
        justifyContent: "center",
        width: 80
    },
    titleWrap: {
        justifyContent: "center",
        alignItems:"center",
        flexGrow: 1
    },
    title: {
        textAlign: "right",
        color:"#FFF",
        fontWeight:"800"
    },
    rightIcon: {
        alignItems:"flex-end",
        flexShrink:0,
        width: 80
    }
})